<template>
	<div class="push-page unified-cursor-default flex unified-flex-space-between ">
		<div class="user-div">
			<div class="search flex unified-flex-space-between unified-flex-align">
				<userAvatar></userAvatar>
				<div class="input flex unified-flex-space-between unified-flex-align">
					<i class="el-icon-search"></i>
					<input type="" name="" id="" value="" />
				</div>
				<div class="search-btn flex unified-flex-center unified-flex-align">
					<i class="el-icon-circle-plus"></i>
				</div>
			</div>
			<div class="message-div">
				<Messagelist></Messagelist>
				<div class="message-option">
					<div v-for="(messItem,index) in $store.state.messageOptionMenu" :key="index"
						class="message-option-li flex unified-flex-center unified-flex-align">
						<i :class="messItem.icon"></i>{{messItem.meneName}}
					</div>
				</div>
			</div>
		</div>
		<div class="reply-div">
			<div class="party-heade flex  unified-flex-align">
				<div class="identity flex ">
					<span class="party-heade-origin">备注昵称</span>
					<span class="party-heade-mind">原昵称</span>
				</div>
			</div>
			<div class="push-list">
				<PushLi></PushLi>
			</div>
			<div class="reply-option">
				
				<textarea class="reply-input" rows="" cols=""></textarea>
				<div class="reply-send flex  unified-flex-align">
						<el-button size="mini">重置</el-button>
					<el-button size="mini">发送</el-button>
				</div>
				
			</div>
			
			
		</div>
	</div>
</template>

<script>
	import Messagelist from '../../components/message-list/messgelist.vue'
	import PushLi from '../../components/push-li/push-li.vue'
	import userAvatar from '../../components/avatar/avatar-status.vue'
	export default {
		components: {
			Messagelist,
			PushLi,
			userAvatar
		},

		data() {

			return {
				messgelist: [{}, {}, {}],
				// 聊天底部菜单 当前选项
				messageOptionMenuIndex: 0,
				messageValue:""
			}

		}

	}
</script>

<style scoped="scoped">
	.push-page {

		width: 100%;
		height: 100%;
		border-radius: 15px;
		overflow: hidden;
	}

	.search {
		padding: 0px 5px;
		padding-right: 10px;
		width: 100%;
		height: 40px;
		box-sizing: border-box;
		margin: 10px 0px;
		display: flex;
	}

	.party-heade {
		height: 61px;
		border-bottom: 1px solid #C3C3C322;
		padding-left: 15px;

	}

	.identity {
		flex-direction: column;
		text-align: left;
	}

	.party-heade-origin {
		font-size: 16px;
	}

	.party-heade-mind {
		font-size: 8px;
		color: #c3c3c3;
	}

	.input {
		font-size: 8px;
		flex: 1;
		height: 80%;
		border-radius: 15px;
		border: 1px solid #c3c3c322;
		padding-left: 8px;
		box-sizing: border-box;
		margin: 0 10px;
	}

	.input input {
		height: 100%;
		outline: none;
		border: none;
		text-indent: 10px;
		background-color: transparent;
	}

	.search-btn {
		width: 40px;
		height: 40px;
		font-size: 20px;
		color: #409EFF;
	}

	.user-div {
		width: 24%;
		height: 100%;
		background-color: #fff;
		/* padding-top: 8px; */
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		border-right: 1px solid #C3C3C322;
	}

	.message-div {
		width: 100%;
		flex: 1;
		overflow: hidden;
		border-top: 1px solid #C3C3C322;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.message-list {
		flex: 1;
	}

	.message-option {
		width: 100%;
		height: 50px;
		min-height: 50px;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.message-option-li {
		flex: 1;
		height: 100%;
		font-size: 8px;
		color: #2C3E50;
		flex-direction: column;
	}

	.message-option-li:hover {
		color: #2269F3;
	}

	.reply-div {
		flex: 1;
		height: 100%;
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}

	.push-list {
		width: 100%;
		flex: 1;
	}
	.reply-option{
		border: 2px solid #2269F3;
		padding: 0 2px;
		padding-top: 2px;
		box-sizing: border-box;
		border-radius: 10px;
		width: 98%;
		margin: 10px auto;
	}
	.reply-input {
		padding-top: 6px;
		box-sizing: border-box;
		width: 100%;
		height: 80px;
		border: none;
		outline: none;
		border-radius: 10px;
		text-indent: 6px;	
		/* background-color: #00ABFD; */
		margin: 0 auto;
		/* margin-bottom: 10px; */
		font-size: 14px;
	}
	.reply-send{
		width: 96%;
		margin: 0 auto;
		justify-content: flex-end;
		margin-bottom: 10px;
	}
	
	.reply-input::-webkit-scrollbar{
		width:6px;
	}	
	.reply-input::-webkit-scrollbar-track-piece{
		background-color: #C3C3C322;
	}
	.reply-input::-webkit-scrollbar-thumb{
		background-color: #2269F3;
		border-radius: 6px;
	}
</style>
